<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MAGNUS Technologies</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="./static/jquery/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="./static/jquery/jquery.js"></script>
<script type="text/javascript" src="./static/jquery/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript">
var pageNo = 0;
var pageSize = 20;

$(document).ready(function() {
	loadData();
	$('#more').click(function(){
		loadData();
	});
});

function loadData() {
	$('#more').hide();
	$('#loading').show();
	$.getJSON('./test/data.json', function(data) {
		var items = [];
		var count = 0;
		$.each(data.dayExp, function(i,item){
			items.push('<li data-role="list-divider">' + item.date + '<span class="ui-li-count">Rs. ' + item.total + '</span></li>');
			$.each(item.expenses, function(i1,item1) {
				items.push('<li><a href="index.html"><p><strong>' + item1.category + '</strong></p>'
						+ '<p>' + item1.description + '</p>'
						+ '<p class="ui-li-aside">Rs.<strong>' + item1.amount + '</strong></p></a></li>');
				count = count + 1;
			});
		});

		$("#list").append(items.join(''));
		$("#list").listview("refresh");
		pageNo = pageNo + 1;
		pageSize = pageSize + count;
		$('#loading').hide();
		$('#more').show();
	});
}
</script>
</head>
	<body>
		<div data-role="page">
            <div data-theme="b" data-role="header" data-position="fixed">
                <a data-role="button" data-inline="true" data-transition="fade" data-theme="c" href="add.html" data-icon="plus" data-iconpos="left">
                    Add
                </a>
                <a data-role="button" data-inline="true" data-transition="fade" data-theme="c" href="logout.action" data-icon="gear" data-iconpos="left">
                    Logout
                </a>
                <h3>AEM</h3>
            </div>
            
            <div data-role="content">
            	<ul data-role="listview" data-theme="d" data-divider-theme="d" id="list"></ul>
            	<br/>
            	<div id="loading"><center><img alt="loading" src="./static/jquery/images/appender.gif"></center></div>
            	<div id="more"><input type="submit" data-theme="c" data-icon="gear" data-iconpos="left" value="Show more" /></div>
            </div>
            
            <div data-theme="b" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li><a href="#" data-icon="home" class="ui-btn-active">Home</a></li>
                        <li><a href="report.html" data-icon="grid" data-ajax="false" data-transition="slide">Report</a></li>
                    </ul>
                </div>
            </div>
        </div>
	</body>
</html>